import React from 'react'
import { Select, Input } from 'antd'
import './index.css'
const { Option } = Select

interface IProps {
  width: string
  height: string
  scale: string
  onWidthChange(event: string): void
  onHeightChange(event: string): void
  onScaleChange(event: string): void
}

const OperateBar: React.FunctionComponent<IProps> = ({
  width,
  height,
  scale,
  onWidthChange,
  onHeightChange,
  onScaleChange,
}) => {
  const inputStyle = { display: 'inline-block', width: '100px' }
  return (
    <div className='operate-bar'>
      <label>宽：</label>
      <Input
        style={inputStyle}
        size='small'
        value={width}
        onChange={(e) => onWidthChange(e.target.value)}
      />
      <label>高：</label>
      <Input
        style={inputStyle}
        size='small'
        value={height}
        onChange={(e) => onHeightChange(e.target.value)}
      />
      <label>缩放：</label>
      <Select
        size='small'
        style={{ width: '100px' }}
        value={scale}
        onChange={(e) => onScaleChange(e)}
      >
        <Option value='1.0'>100%</Option>
        <Option value='0.8'>80%</Option>
        <Option value='0.5'>50%</Option>
        <Option value='0.2'>20%</Option>
      </Select>
    </div>
  )
}

export default OperateBar
